<template>
	<div class="zco-ocr-bank-card-container">
		<p>对{{ getRole }}&lt;{{ toUserName }}&gt;上传的银行卡照片进行OCR识别</p>
		<template v-if="status === 'done'">
			<p>识别成功:</p>
			<p>识别结果：</p>
			<p>卡片类型：{{ cardType }}</p>
			<p>卡号：{{ cardNumber }}</p>
			<p>银行：{{ bankName }}</p>
			<p>有效期：{{ validToDate }}</p>
		</template>
		<template v-if="status === 'failed'">
			<p>识别失败</p>
		</template>
	</div>
</template>
<script>
export default {
	name: 'APP',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		cardType: {
			type: String,
			default: () => ''
		},
		cardNumber: {
			type: String || Number,
			default: () => ''
		},
		bankName: {
			type: String,
			default: () => ''
		},
		validToDate: {
			type: String,
			default: () => ''
		},
		status: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getRole() {
			return `${this.toUserRole === 'customer' ? '访客' : '坐席'}`;
		}
	},
	data() {
		return {};
	},
	methods: {},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-ocr-bank-card-container p {
	margin: 0;
}
</style>
